<template>
  <el-aside class="bg-[#383F4D] text-white" :width="collapse ? '64px' : '200px'">
    <div class="flex items-center justify-center h-7 bg-[#4A5064]" @click="toggleCollapse">
      <el-icon class="cursor-pointer">
        <Switch />
      </el-icon>
    </div>
    <el-menu
      class="!border-0"
      active-text-color="#409EFF"
      background-color="#383F4D"
      text-color="#fff"
      :collapse="collapse"
      unique-opened
      :collapse-transition="false"
      router
      :default-active="menuActive"
    >
      <el-sub-menu :index="item.id.toString()" v-for="item in menuList" :key="item.id">
        <template #title>
          <el-icon><component :is="iconsMap[item.id]" /></el-icon>
          <span>{{item.authName}}</span>
        </template>
        <el-menu-item :index="`/${child.path}`" v-for="child in item.children" :key="child.id">
          <el-icon><IconMenu /></el-icon>
          <span>{{child.authName}}</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>
<script lang="ts" setup>
import { ref, inject, onBeforeMount } from 'vue'
import { useRoute } from 'vue-router'
import { UserFilled, Management, GoodsFilled, List, TrendCharts, Menu as IconMenu, Switch } from '@element-plus/icons-vue'
import type { AxiosInstance } from 'axios'

const route = useRoute()
const axios = inject<AxiosInstance>('axios') as AxiosInstance
const menuList = ref<menu[]>([])

const iconsMap = <{[key: number]: any}>{
  125: UserFilled,
  103: Management,
  101: GoodsFilled,
  102: List,
  145: TrendCharts
}
const menuActive = ref(route.path)
const collapse = ref(false)
const toggleCollapse = () => {
  collapse.value = !collapse.value
}

const getMenuList = async () => {
  const res: apiData = await axios.get('menus')
  menuList.value = res.data
}
onBeforeMount(getMenuList)
</script>
